<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ajax_get请求</title>
    <style>
        #content {
            margin-top: 10px;
            width: 300px;
            height: 100px;
            border: 1px solid black;
        }
    </style>
</head>
<body>
<h3>该页面是测试：ajax_get请求</h3>
<button id="btn">点我发送请求（原生js-ajax-get）</button>
<div id="content"></div>
<script type="text/javascript">
    // 获取按钮
    const btn = document.getElementById('btn')
    const content = document.getElementById('content')
    // 给按钮绑定监听
    btn.onclick = () => {
        // 1. 创建 xhr 实例对象（new）
        const xhr = new XMLHttpRequest()

        // 绑定监听
        xhr.onreadystatechange = () => {
            if (xhr.readyState === 4) {
                if (xhr.status >= 200 && xhr.status < 300) {
                    console.log(xhr.response);
                    content.innerText = `<h3>${xhr.response}</h3>`;
                }
            }
        }

        /*
            1. 形如：key=value&key=value 就是 query 参数的 urlencoded 编码形式
            2. 形如：/xx/xxx/软柠柠吖/18 就是 params 参数
         */
        // 2. 指定发送请求的：method、url、参数
        // xhr.open('GET', 'http://localhost:8080/test_get?name=软柠柠吖&age=18') // 携带 query 参数
        xhr.open('PUT', 'http://localhost:8080/test_put') // 携带 query 参数
        // xhr.open('GET', 'http://localhost:8080/test_get2/软柠柠吖/18') // 携带 params 参数
        // 3. 发送请求
        xhr.send()

    }
</script>
</body>
</html>
